<script setup>
import {ref, onBeforeMount, nextTick, reactive} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus';
import {Plus, Edit, Delete} from '@element-plus/icons-vue'
import {schoolColumnList, schoolColumnUpdate, schoolColumnDel, schoolColumnInsert} from "@/api/school-column";
import {columnInsert, columnUpdate} from "@/api/column";
import {useDevice} from "@/hooks/web/useDevice";

let {mobile} = useDevice()
let dialogVisible = ref(false)
const loading = ref(false)
const menuDialog = ref(null)
let tableData = ref([
  {name: '国际预科', time: '2025-01-14'},
  {name: '国际本科', time: '2025-01-14'},
  {name: '中外合作办学', time: '2025-01-14'},
  {name: '院校库', time: '2025-01-14'},
])
const treeData = ref([])
const rules = reactive({
  name: [{trigger: 'blur', message: '请输入文章栏目名称', required: true}]
})
const form = reactive({name: '', pid: '', id: ''})
const formRef = ref('')
let fetchData = async () => {
  loading.value = true
  let data = await schoolColumnList();
  loading.value = false
  tableData.value = data.data.list
}

const handleEdit = (row) => {
  dialogVisible.value = true
  fetchColumn()
  nextTick(() => {
    Object.assign(form, row)
  })
}

const fetchColumn = async () => {
  let res = await schoolColumnList();
  if (res) {
    treeData.value = res.data.list
  }
}

const handleAdd = async () => {
  dialogVisible.value = true
  fetchColumn()
}

const handleDel = (row) => {
  ElMessageBox.confirm('确认要删除 ? 一旦删除无法恢复', '提示', {type: 'warning'}).then(async () => {
    let res = await schoolColumnDel({id: row.id})
    if (res) {
      ElMessage({message: '删除成功', type: 'success'})
      await fetchData();
    }
  }).catch(() => {
  })
}

const handleSave = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      let res = '';
      if (form.id) {
        res = await schoolColumnUpdate(form)
      } else {
        res = await schoolColumnInsert(form)
      }

      if (res) {
        ElMessage({message: '操作成功', type: 'success'})
        closeDialog()
        await fetchData()
      }
    }
  })
}

const closeDialog = () => {
  formRef.value.resetFields()
  form.id = ''
  dialogVisible.value = false
}

onBeforeMount(() => {
  fetchData()
})

</script>
<template>
  <el-button @click="handleAdd" plain type="primary" :icon="Plus">添加栏目</el-button>
  <el-table v-loading="loading" :data="tableData" style="width: 100%; margin-top: 20px" row-key="id" border
            default-expand-all>
    <el-table-column prop="name" label="学校栏目名称"/>
    <el-table-column prop="created_at" label="添加时间">
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button v-if="!scope.row.school_type" link @click="handleEdit(scope.row)" :icon="Edit" type="primary">编辑
        </el-button>
        <el-button v-if="!scope.row.school_type" link @click="handleDel(scope.row)" :icon="Delete" type="primary">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogVisible" :title="form.id?'编辑学校栏目':'添加学校栏目'" :width="mobile ? '80%' : '40%'"
             draggable
             :before-close="closeDialog">
    <el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
      <el-row>
        <el-col :lg="11">
          <el-form-item label="父级栏目" prop="pid">
            <el-tree-select
                v-model="form.pid"
                :data="treeData"
                :props="{ value: 'id', label: 'name' }"
                check-strictly
                :render-after-expand="false"
                style="width:100%;"
            />
          </el-form-item>
        </el-col>
        <el-col :lg="11">
          <el-form-item label="学校栏目名称" prop="name">
            <el-input v-model="form.name" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleSave()">保存</el-button>
        <el-button @click="closeDialog">
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

